import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  DatePicker,
  Modal,
  InputNumber,
  message,
  Popconfirm,
  List,
  Avatar,
  Table,
  Tag,
  Popover,
  Checkbox,
  Spin
} from 'antd';
import InputNumberRange from '@/components/InputNumberRange';
import CheckAllBox from '@/components/CheckAllBox/index';
import MyTag from './memberTagChcked';
import moment from 'moment';
import styles from './index.less';
import router from 'umi/router';
const { CheckableTag } = Tag;
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const FormItem = Form.Item;
const { Option } = Select;
const Search = Input.Search;
const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');

const CreateForm = Form.create()(props => {
  const {
    modalVisible,
    form,
    handleAdd,
    handleModalVisible,
    handleModalVisibleAndRequest,
    handleModalJustVisible,
    contentType,
    allTagList,
    _this,
    userIds,
    cardList,
  } = props;
  //   console.log(cardList)
  let selectTags = [];
  const okHandle = () => {
    // console.log({ MemberIds: userIds, TagIds: selectTags });
    const { dispatch } = _this.props;
    if (contentType == 1) {
      dispatch({
        type: 'customerList/AddMemberTags',
        payload: { MemberIds: userIds, TagIds: selectTags },
        callback: {
          success: data => {
            message.success('操作成功');
            handleModalVisibleAndRequest();
            _this.setState({ selectedRowKeys: [] })
            _this.child.cancelChecked();
          },
          error: (index, data) => {
            message.error(data.Msg);
          },
        },
      });
    } else if (contentType == 2) {
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        let postData = { ...fieldsValue, MemberIds: userIds };
        dispatch({
          type: 'customerList/ChangePoints',
          payload: postData,
          callback: {
            success: data => {
              message.success('操作成功');
              form.resetFields();
              handleModalVisibleAndRequest();
              _this.setState({ selectedRowKeys: [] })
              _this.child.cancelChecked();
            },
            error: (index, data) => {
              message.error(data.Msg);
            },
          },
        });
      });
    } else if (contentType == 3) {
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        let postData = { ...fieldsValue, MemberIds: userIds };
        dispatch({
          type: 'customerList/AddCard',
          payload: postData,
          callback: {
            success: data => {
              message.success('操作成功');
              form.resetFields();
              handleModalVisibleAndRequest();
              _this.setState({ selectedRowKeys: [] })
              _this.child.cancelChecked();
            },
            error: (index, data) => {
              message.error(data.Msg);
            },
          },
        });
      });
    }
  };
  const tagOnChange = (checked, value) => {
    if (checked) {
      selectTags.push(value);
    } else {
      if (selectTags.filter(item => item == value).length > 0) {
        let index = selectTags.findIndex(item => item == value);
        selectTags.splice(index, 1);
      }
    }
    // console.log(selectTags);
  };

  const seachTag = name => {
    // console.log(name);
    let list = allTagList.filter(item => item.Name.indexOf(name) > -1);
    // console.log(list);
    _this.setState({ ctagList: list }, () => {
      _this.forceUpdate();
    });
  };

  return (
    <Modal
      destroyOnClose
      title={
        contentType == 1
          ? '选择标签'
          : contentType == 2
            ? '修改积分'
            : contentType == 3
              ? '发会员卡'
              : ''
      }
      visible={modalVisible}
      onOk={okHandle}
      confirmLoading={
        contentType == 1
          ? _this.props.loadAddTags
          : contentType == 2
            ? _this.props.loadChangePoints
            : contentType == 3
              ? _this.props.loadAddCard
              : false
      }
      onCancel={() => handleModalJustVisible()}
      width={contentType == 3 ? 320 : 640}
      className={styles.MyModal}
    >
      {contentType == 1 ? (
        <Fragment>
          <Row className={styles.AddTag}>
            <Col span={9}>
              <Search
                placeholder="请输入标签名称"
                onSearch={value => seachTag(value)}
              />
            </Col>
          </Row>
          <Row className={styles.TagList}>
            <Col>
              {_this.state.ctagList &&
                _this.state.ctagList.map(tag => {
                  return (
                    <MyTag onchecked={tagOnChange} value={tag.Id}>
                      {tag.Name}
                    </MyTag>
                  );
                })}
            </Col>
          </Row>
        </Fragment>
      ) : contentType == 2 ? (
        <Fragment>
          <Row className={styles.ChangePoints}>
            <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 17 }} label="修改积分 (增减)"
              extra="输入100，表示增加100，输入-100，表示减少100，只能输入整数"
            >
              {form.getFieldDecorator('Point', {
                rules: [
                  { required: true, message: '请输入积分数值' },
                  { pattern: /^-?[1-9]\d*$/, message: '请输入整数' }
                ],
              })(<InputNumber placeholder="请输入整数" min={-999999} max={999999} />)}
            </FormItem>
          </Row>
          <Row>
            <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 17 }} label="描述">
              {form.getFieldDecorator('Remark', {
                rules: [{ message: '备注最多30个字符', min: 0, max: 30 }],
              })(<TextArea placeholder="最多30字，需备注增减原因" />)}
            </FormItem>
          </Row>
        </Fragment>
      ) : contentType == 3 ? (
        <Fragment>
          <Row>
            <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} label="会员卡">
              {form.getFieldDecorator('CardId', {
                rules: [{ required: true, message: '请选择会员卡' }],
              })(
                <Select style={{ width: 198 }}>
                  {cardList &&

                    cardList.map(item => {
                      return <Option value={item.Id}>{item.Name}</Option>;
                    })}
                </Select>
              )}
            </FormItem>
          </Row>
        </Fragment>
      ) : null}
    </Modal>
  );
});

/* eslint react/no-multi-comp:0 */
@connect(({ global, customerList, loading }) => ({
  customerList: customerList.customerListInfo.customerList,
  customerListInfo: customerList.customerListInfo,
  allTagList: customerList.allTagList,
  cardList: customerList.cardList,
  tagList: customerList.tagList,
  oemInfo: global.oemInfo,
  loading: loading.effects['customerList/SearchMemberList'],
  loadAddTags: loading.effects['customerList/AddMemberTags'],
  loadChangePoints: loading.effects['customerList/ChangePoints'],
  loadAddCard: loading.effects['customerList/AddCard'],
}))
@Form.create()
class TableList extends PureComponent {
  state = {
    modalVisible: false,
    updateModalVisible: false,
    expandForm: false,
    selectedRowKeys: [],
    ctagList: [],
    formValues: {},
    paginationProps: {
      showSizeChanger: true,
      showQuickJumper: false,
      showTotal: total => `共 ${total} 条记录`,
      pageSize: 10,
      total: 0,
    },
    selectedRows:[],
    isChecked:false,
    cardLoading:true,
    indeterminate:false
  };
  componentWillMount() {
    window.Isoption = false;
  }

  componentDidMount() {
    window.Isoption = true;
    this.requestList();
    this.requestAllTagList();
    this.requestCardList();
    this.requestTagList();
  }

  requestList = params => {
    const { dispatch } = this.props;
    dispatch({
      type: 'customerList/SearchMemberList',
      payload: {
        PageIndex: params && params.current ? params.current : 1,
        PageSize: params && params.pageSize ? params.pageSize : 10,
        KeyWord: params && params.KeyWord ? params.KeyWord : '',
        MemberType: params && params.MemberType ? params.MemberType : '',
        CardIds: params && params.CardIds ? params.CardIds : [],
        MinLastBuyDate: params && params.MinLastBuyDate ? params.MinLastBuyDate : '',
        MaxLastBuyDate: params && params.MaxLastBuyDate ? params.MaxLastBuyDate : '',
        TagIds: params && params.TagIds ? params.TagIds : [],
        MinPoints: params && params.MinPoints ? params.MinPoints :params&&params.MinPoints===0?0: '',
        MaxPoints: params && params.MaxPoints ? params.MaxPoints : params&&params.MaxPoints===0?0:'',
        MinCreateDate: params && params.MinCreateDate ? params.MinCreateDate : '',
        MaxCreateDate: params && params.MaxCreateDate ? params.MaxCreateDate : '',
        SortName: params && params.SortName ? params.SortName : 'Id',
        Sort: params && params.Sort ? params.Sort : 'Desc',
        p: Math.random()
      },
      callback: {
        success: res => {
            if(res.Code ===0) {
              this.child.cancelChecked();
                this.setState({
                  cardLoading: false,
                  selectedRowKeys:[]
                })
            }
        },
        error: res => {
          this.setState({
            cardLoading: false,
            selectedRowKeys:[]
          })
        }
      }
    });
  };

  requestTagList = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'customerList/FindTagList',
      callback: {
        success: data => {
          this.setState({ ctagList: data.Data });
        },
      },
    });
  };

  requestAllTagList = () => {
    const { dispatch, allTagList } = this.props;
    dispatch({
      type: 'customerList/FindAllTagList',
    });
  };

  requestCardList = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'customerList/FindCardList',
    });
  };

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const { formValues } = this.state;
    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});

    const params = {
      current: pagination.current,
      pageSize: pagination.pageSize,
      ...formValues,
      ...filters,
    };
    if (sorter.field) {
      params.SortName = `${sorter.field}`;
      params.Sort = `${sorter.order === 'ascend' ? 'Asc' : 'Desc'}`;
    } else {
      params.SortName = `Id`;
      params.Sort = `Desc`;
    }

    // console.log(params);
    this.requestList(params);
    // dispatch({
    //   type: 'rule/fetch',
    //   payload: params,
    // });
  };

  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    this.setState({
      formValues: {},
    });
    //this.requestList();
  };

  toggleForm = () => {
    const { expandForm } = this.state;
    this.setState({
      expandForm: !expandForm,
    });
  };

  handleSearch = e => {
    e.preventDefault();

    const { dispatch, form } = this.props;

    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        ...fieldsValue,
        MinLastBuyDate:
          fieldsValue.LastBuyDate && fieldsValue.LastBuyDate[0]
            ? moment(fieldsValue.LastBuyDate[0]).format('YYYY-MM-DD')
            : '',
        MaxLastBuyDate:
          fieldsValue.LastBuyDate && fieldsValue.LastBuyDate[1]
            ? moment(fieldsValue.LastBuyDate[1]).format('YYYY-MM-DD')
            : '',
        MinCreateDate:
          fieldsValue.CreateDate && fieldsValue.CreateDate[0]
            ? moment(fieldsValue.CreateDate[0]).format('YYYY-MM-DD')
            : '',
        MaxCreateDate:
          fieldsValue.CreateDate && fieldsValue.CreateDate[1]
            ? moment(fieldsValue.CreateDate[1]).format('YYYY-MM-DD')
            : '',
        MinPoints: fieldsValue.Points && fieldsValue.Points[0] ? fieldsValue.Points[0] : fieldsValue.Points&&fieldsValue.Points[0]===0?0:'',
        MaxPoints: fieldsValue.Points && fieldsValue.Points[1] ? fieldsValue.Points[1] : fieldsValue.Points&&fieldsValue.Points[1]===0?0:'',
      };

      this.setState({
        formValues: values,
      });
      //   console.log(values);
      this.requestList({ ...values });
    });
  };

  handleModalVisible = flag => {
    this.setState(
      {
        modalVisible: !!flag,
      },
      () => {

        if (!this.state.modalVisible) {

          this.requestList();
        }
      }
    );
  };
  handleModalVisibleAndRequest = flag => {
    this.setState({
      modalVisible: false,
    }, () => {
      this.requestList();
    });
  };
  handleModalJustVisible = flag => {
    this.setState({
      modalVisible: false,
    });
  };
  handleAdd = type => {
    const { selectedRowKeys } = this.state;
    if (!selectedRowKeys.length) return message.error('至少选择一位会员');
    this.setState({ contentType: type }, () => {
      this.handleModalVisible(true);
    });
  };

  deleteTag = (MemberId, TagId) => {
    const {
      dispatch,
      customerListInfo: { customerList },
    } = this.props;
    dispatch({
      type: 'customerList/DelMemberTag',
      payload: {
        MemberId,
        TagId,
      },
      callback: {
        success: res => {
          if (res.Code == 0) {
            let index = customerList.findIndex(item => item.Id === MemberId);
            let idx = customerList[index].Tags.findIndex(item => item.Id === TagId);
            customerList[index].Tags.splice(idx, 1);
            message.success('已删除');
            dispatch({
              type: 'customerList/changeCustomerList',
              payload: customerList,
            });
            //this.requestList();
          }
        },
      },
    });
  };

  renderSimpleForm() {
    const {
      form: { getFieldDecorator },
    } = this.props;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 8 },
    };
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col span={8}>
            <FormItem label="关键词" {...formItemLayout}>
              {getFieldDecorator('KeyWord')(
                <Input placeholder="微信昵称/手机号/备注名" className="xkd-width-per-100" />
              )}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="客户身份" {...formItemLayout}>
              {getFieldDecorator('MemberType')(
                <Select placeholder="请选择" className="xkd-width-per-100">
                  <Option value={0}>全部</Option>
                  <Option value={1}>客户</Option>
                  <Option value={2}>会员</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col span={8}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                重置
              </Button>
              <a style={{ marginLeft: 8 }} onClick={this.toggleForm}>
                展开 <Icon type="down" />
              </a>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  renderAdvancedForm() {
    const {
      form: { getFieldDecorator },
      cardList,
      allTagList,
    } = this.props;

    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 8 },
    };
    return (
      <div style={{background:'#fafafa',marginBottom:16,paddingTop:16,paddingRight:16,boxSizing:'border-box'}}>
        <Form onSubmit={this.handleSearch} layout="inline">
          <Row>
            <Col span={8}>
              <FormItem label="关键词">
                {getFieldDecorator('KeyWord')(
                  <Input placeholder="微信昵称/手机号/备注名" className="xkd-width-per-100" />
                )}
              </FormItem>
            </Col>
            <Col span={8}>
              <FormItem label="客户身份">
                {getFieldDecorator('MemberType')(
                  <Select placeholder="请选择" className="xkd-width-per-100">
                    <Option value={0}>全部</Option>
                    <Option value={1}>客户</Option>
                    <Option value={2}>会员</Option>
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={8}>
              <FormItem label="会员卡">
                {getFieldDecorator('CardIds')(
                  <Select placeholder="请选择" className="xkd-width-per-100" mode="multiple">
                    {cardList &&
                      cardList.map(item => {
                        return (
                          <Option value={item.Id} key={item.Id}>
                            {item.Name}
                          </Option>
                        );
                      })}
                  </Select>
                )}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={8}>
              <FormItem label="最近消费时间">
                {getFieldDecorator('LastBuyDate')(
                  <RangePicker className="xkd-width-per-100" placeholder={['开始日期', '    结束日期']} />
                )}
              </FormItem>
            </Col>
            <Col span={8}>
              <FormItem label="标签">
                {getFieldDecorator('TagIds')(
                  <Select placeholder="请选择" className="xkd-width-per-100" mode="multiple">
                    {allTagList &&
                      allTagList.map(item => {
                        return (
                          <Option value={item.Id} key={item.Id}>
                            {item.Name}
                          </Option>
                        );
                      })}
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={8}>
              <FormItem label="积分">
                {getFieldDecorator('Points')(<InputNumberRange />)}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={8}>
              <FormItem label="成为客户时间">
                {getFieldDecorator('CreateDate')(
                  <RangePicker className="xkd-width-per-100" placeholder={['开始日期', '    结束日期']} />
                )}
              </FormItem>
            </Col>
          </Row>
          <div style={{ overflow: 'hidden' }}>
            <div className="screenNavButton">
                <Button type="primary" htmlType="submit">
                    筛选
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                    重置
                </Button>
            </div>
        </div>
        </Form>
      </div>
    );
  }

  renderForm() {
    //const { expandForm } = this.state;
    //return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm();
    return this.renderAdvancedForm();
  }

  onSelectChange = (selectedRowKeys,selectedRows) => {
    //console.log('selectedRowKeys changed: ', selectedRowKeys);

    this.child.onChange(selectedRowKeys);
    this.setState({ selectedRowKeys, selectedRows});
  };

  handleUpdateModalVisible = (b, data) => {
    router.replace({
      pathname: `/${window.storeId}/customer/detail/${data.Id}`,
    });
    // window.open(`/#/${window.storeId}/customer/detail/${data.Id}`);
  };


  render() {
    const {
      loading,
      //  customerList,
      customerListInfo,
      oemInfo,
      allTagList,
      cardList,
      tagList,
    } = this.props;

    const { modalVisible, selectedRowKeys, paginationProps, contentType, ctagList, cardLoading,selectedRows } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      hideDefaultSelections: true
    };

    const parentMethods = {
      handleAdd: this.handleAdd,
      handleModalVisible: this.handleModalVisible,
      handleModalVisibleAndRequest: this.handleModalVisibleAndRequest,
      handleModalJustVisible: this.handleModalJustVisible,
      contentType,
    };
    const updateMethods = {
      handleUpdateModalVisible: this.handleUpdateModalVisible,
      handleUpdate: this.handleUpdate,
    };
    const columns = [
      {
        title: '客户信息',
        dataIndex: 'name',
        render: (text, record) => (
          <div className={styles.customerInfo}>
            <List.Item>
              <List.Item.Meta
                avatar={
                  <div className="xkd-position-relative">
                    <Avatar
                      src={record.HeadImgUrl + '?x-oss-process=style/240'}
                      size={48}
                      shape="square"
                    />
                    <span className={`${styles.coustomerTag} ${record.CustomerType === '会员'?styles.members:''}`}>{record.CustomerType}</span>
                  </div>
                }
                title={
                  <div>
                    <div
                      className={`xkd-text-ellipsis ${styles.customerName}`}
                      title={record.NickName}
                    >
                      {record.NickName}
                    </div>
                    <div
                      className={`xkd-text-ellipsis xkd-font13 ${styles.customerName}`}
                      title={record.Remark}
                    >
                      {record.Remark}
                    </div>
                  </div>
                }
              />
            </List.Item>
            {/*<div className={styles.tagBox}>
              <div
                style={{ position: 'absolute', top: 8, left: 0, width: 1022, overflow: 'hidden' }}
              >
                {record.CustomerType === '客户' ? (
                  <Tag
                    color={record.CustomerType === '客户' ? 'geekblue' : ''}
                    className={record.CustomerType === '会员' ? styles.customerTag : ''}
                  >
                    {record.CustomerType}
                  </Tag>
                ) : (
                    record.Cards && record.Cards.length > 0 ? (
                      <Popover content={(
                        record.Cards && record.Cards.length > 0 ? record.Cards.map((item, index) => {
                          return <p key={index}>{item.Name}</p>
                        }) : ''
                      )}
                        trigger="click">
                        <Tag
                          color={record.CustomerType === '客户' ? 'geekblue' : ''}
                          className={record.CustomerType === '会员' ? styles.customerTag : ''}
                        >
                          {record.CustomerType}
                        </Tag>
                      </Popover>
                    ) : (
                        <Tag
                          color={record.CustomerType === '客户' ? 'geekblue' : ''}
                          className={record.CustomerType === '会员' ? styles.customerTag : ''}
                        >
                          {record.CustomerType}
                        </Tag>
                      )
                  )}
                <Tag>{record.SystemTagType}</Tag>
                {record.Tags &&
                  record.Tags.map((tag, index) => {
                    if (tag.TagType == 1) {
                      return (
                        <Popconfirm
                          placement="topRight"
                          title={'确定删除该标签吗？'}
                          onConfirm={() => this.deleteTag(record.Id, tag.Id, index)}
                          okText="确定"
                          cancelText="取消"
                        >
                          <Tag key={tag.Id}>
                            {tag.Name}
                            <Icon type="close" />
                          </Tag>
                        </Popconfirm>
                      );
                    } else {
                      return <Tag key={tag.Id}>{tag.Name}</Tag>;
                    }
                  })}
              </div>
            </div>*/}
          </div>
        ),
      },
      {
        title: '标签',
        dataIndex: 'TotalPoints',
        // width: '8%',
        render: (val,record) => (
          <span className="xkd-text-ellipsis" >
            <Tag>{record.SystemTagType}</Tag>
            {
              record.Tags && record.Tags.length > 0?(
                <Popover
                  placement="bottom"
                  style={{maxWidth:'240px'}}
                  content={(
                            record.Tags && record.Tags.length > 0 ? record.Tags.map((tag, index) => {
                              return <Tag key={tag.Id}>{tag.Name}<Icon type="close" onClick={() => this.deleteTag(record.Id, tag.Id, index)}/></Tag>
                            }) : ''
                          )}
                  trigger="click"
                 >
                  <span className="xkd-font12" style={{cursor:"pointer"}}>更多<Icon type="double-right" style={{transform:'rotate(90deg)',marginLeft:6}}/></span>
                </Popover>
              ):null
            }
          </span>
        ),
      },
      {
        title: '手机号码',
        dataIndex: 'Telephone',
       // width: '12%',
      // width:86,
        render: val => <span className="xkd-text-ellipsis" style={{minWidth:86,display:'inline-block'}}>{val || '-'}</span>,
      },
      {
        title: '最近消费时间',
        dataIndex: 'LastBuyTime',
       // width: '12%',
        render: val => <span style={{minWidth:86,display:'inline-block'}}>{val || '-'}</span>,
        // mark to display a total number
        // needTotal: true,
      },
      {
        title: '消费金额',
        dataIndex: 'TotalFee',
        //width: '14%',
       // width: 150,
        align: 'right',
        sorter: true,
        render: val => (
          <span className="xkd-text-ellipsis" style={{minWidth:80,display:'inline-block'}} title={val}>
            ￥{val}
          </span>
        ),
      },
      {
        title: '消费次数',
        dataIndex: 'TotalFeeNum',
       // width: "14%",
       //width: 150,
        align: 'right',
        sorter: true,
        render: val => (
          <span className="xkd-text-ellipsis" style={{minWidth:80,display:'inline-block'}} title={val}>
            {val}
          </span>
        ),
      },
      {
        title: '客单价',
        dataIndex: 'SingleFee',
       // width: '12%',
       //width: 110,
        align: 'right',
        sorter: true,
        render: val => (
          <span className="xkd-text-ellipsis" style={{minWidth:60,display:'inline-block'}} title={val}>
            ￥{val}
          </span>
        ),
      },
      {
        title: '操作',
        // width: '9%',
        //width: 60,
        align: 'right',
        render: (text, record) => (
          <Fragment>
            <a className="xkd-text-ellipsis" style={{minWidth:40,display:'inline-block'}} onClick={() => this.handleUpdateModalVisible(true, record)}>详情</a>
          </Fragment>
        ),
      },
    ];
    const props={
      dataList:customerListInfo.customerList,
      onSelectChange:this.onSelectChange,
      selectedRows:selectedRows
    }
    return (
      <Fragment>
        <Spin spinning={cardLoading}>
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className="tableListForm">{this.renderForm()}</div>
            <div className={styles.tableListOperator}>
              {/* <div className={styles.checkAll}>
                <Checkbox checked={isChecked} indeterminate={indeterminate} onChange={this.selectAll}>当页全选</Checkbox>
              </div> */}
              <CheckAllBox {...props} onRef={(ref) => { this.child = ref }}/>
              <Button onClick={() => this.handleAdd(1)}>打标签</Button>
              <Button onClick={() => this.handleAdd(2)}>修改积分</Button>
              <Button onClick={() => this.handleAdd(3)}>发会员卡</Button>
            </div>
            <Table
              loading={loading}
              rowKey={record => record.Id}
              dataSource={customerListInfo.customerList}
              columns={columns}
              rowSelection={rowSelection}
              onChange={this.handleStandardTableChange}
              pagination={{
                ...paginationProps,
                total: customerListInfo.total,
                current: customerListInfo.pageIndex,
                pageSize: customerListInfo.pageSize,
              }}
            />
          </div>
        </Card>
        </Spin>
        <CreateForm
          {...parentMethods}
          modalVisible={modalVisible}
          userIds={selectedRowKeys}
          allTagList={tagList}
          ctagList={ctagList}
          cardList={cardList}
          _this={this}
        />
      </Fragment>
    );
  }
}

export default TableList;
